<template>
  <div>
    <!-- <div style="width: 100%;position: fixed;top: 0;left: 0;z-index: 99;"> -->

    <!-- left-text="返回"
      @click-left="onClickLeft" -->

    <!-- 引入公共头部组件 -->
    <HeaderMenu
      title="样品"
      rightText="新建"
      leftText="返回"
      @rightEvent="onClickRight"
    />
    <!-- 吸顶布局 -->
    <van-sticky>
      <!-- 搜索区域 -->
      <van-search
        shape="round"
        background="#509DF7"
        show-action
        placeholder="请输入客户名称"
        @search="search"
        v-model="queryParam[0].Keyword"
        @clear="clear"
      >
        <div slot="action" @click="onSearch" style="color:#fff">搜索</div>
      </van-search>
    </van-sticky>
    <div style="width: 100%;">
      <van-tabs v-model="active" @change="call">
        <!-- 我的样品区域 -->
        <van-tab title="我的样品">
          <!-- <van-search
            placeholder="请输入客户名称"
            @search="search"
            v-model="queryParam[0].Keyword"
            @clear="clear"
          /> -->

          <!-- <van-empty v-show="this.data.length == 0" description="空" /> -->
          <div class="outerBox">
            <van-list
              :immediate-check="false"
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div
                class="MySamplebox"
                v-for="item in data"
                :key="item.Id"
                @click="sampleChange(item)"
              >
                <!-- <van-swipe-cell> -->
                <!-- <template #right>
                  <van-icon
                    class="delete"
                    @click.stop="btn([item.Id])"
                    name="delete"
                  />
                </template> -->
                <div class="Father">
                  <div class="state">
                    <div class="sampleName">{{ item.CustomerName }}</div>
                    <div>
                      <van-tag
                        size="large"
                        style="margin: 10px 8px"
                        plain
                        :type="statype(item.ApprovalStatus)"
                        >{{ status(item.ApprovalStatus) }}</van-tag
                      >
                    </div>
                  </div>
                  <div>
                    <div style="margin-left: 10px;font-size: 13px;">
                      样品单号：{{ item.DocumentNo }}
                    </div>

                    <div class="DeliverAddress" style="font-size: 13px;">
                      地址：{{ item.ReceiveAddress }}
                    </div>
                  </div>
                </div>
                <div
                  v-if="item.ApprovalStatus !== 1"
                  style="padding-right: 15px; padding-left: 10px;display: flex;justify-content: flex-end;align-items: center;"
                >
                  <van-button
                    size="mini"
                    @click.stop="Edit(item)"
                    style="margin-top: 12px;"
                    type="info"
                    >编辑</van-button
                  >
                </div>
              </div>
            </van-list>
          </div>
        </van-tab>
        <!-- 样品反馈区域 -->
        <van-tab title="样品反馈">
          <!-- <van-nav-bar title="样品反馈" /> -->
          <!-- <van-search
            placeholder="请输入客户名称"
            @search="searchfeed"
            v-model="queryParam[0].Keyword"
            @clear="clearfeed"
          /> -->

          <!-- <van-empty v-show="this.data.length == 0" description="空" /> -->
          <div class="outerBox">
            <van-list
              :immediate-check="false"
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div
                class="MySamplebox"
                v-for="item in data"
                @click="feed(item)"
                :key="item.Id"
              >
                <!-- <van-swipe-cell>
                <template #right>
                  <van-icon
                    class="delete"
                    @click.stop="btn([item.Id])"
                    name="delete"
                  />
                </template> -->
                <div class="Father">
                  <div class="state">
                    <div class="sampleName">{{ item.CustomerName }}</div>
                    <div>
                      <van-tag
                        size="large"
                        style="margin: 10px 10px"
                        plain
                        :type="
                          item.SampleStatus == 0 || item.SampleStatus == null
                            ? 'primary'
                            : item.SampleStatus == 1
                            ? 'success '
                            : item.SampleStatus == 2
                            ? 'danger'
                            : ''
                        "
                        >{{
                          item.SampleStatus == 0 || item.SampleStatus == null
                            ? "未试用"
                            : item.SampleStatus == 1
                            ? "试用成功"
                            : item.SampleStatus == 2
                            ? "试用失败"
                            : ""
                        }}</van-tag
                      >
                    </div>
                  </div>
                  <div>
                    <div style="margin-left: 10px;font-size: 13px;">
                      样品单号：{{ item.DocumentNo }}
                    </div>

                    <div class="DeliverAddress" style="font-size: 13px;">
                      试用说明：{{ item.SampleTrialRemark }}
                    </div>
                  </div>
                   <div
                  v-if=" item.SampleStatus == 0 || item.SampleStatus == null"
                  style="padding-right: 15px; padding-left: 10px;display: flex;justify-content: flex-end;align-items: center;"
                >
                  <van-button
                    size="mini"
                    @click.stop="feedBackChange(item)"
                    style="margin-top: 12px;"
                    type="warning"
                    >反馈</van-button
                  >
                </div>
                </div>
                <!-- </van-swipe-cell> -->
              </div>
            </van-list>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <!-- <PaginationCom :pagination="pagination" :Total="Total" :thisOjb="this" /> -->
    <!-- <Edit :readonly="readonly" :parentObj="this" ref="edit" /> -->
    <!-- <myWork :readonly="readonly" :parentObj="this" ref="myWork" /> -->
    <!-- <work :readonly="readonly" :parentObj="this" ref="work" /> -->
    <!-- 暂时不要删除后续打开 反馈组件 -->
    <feedback :parentObj="this" ref="feedback" />
    <!-- <feedbackDetail ref="feedbackDetail" /> -->
  </div>
</template>

<script>
// import PaginationCom from "../../components/PaginationCom.vue";

import { Card, Sticky } from "vant";
import {
  Search,
  NavBar,
  Dialog,
  Pagination,
  SwipeCell,
  Empty,
  Icon,
  Tag
} from "vant";
// import Edit from "./Edit.vue";
// import work from "./work.vue";

import feedback from "./feedback.vue";
// import feedbackDetail from "./feedbackDetail.vue";
// import myWork from "./myWork.vue";
// 引入公共头部组件
import HeaderMenu from "../../components/VolHeaderMenu.vue";

export default {
  components: {
    // myWork,
    "van-tag": Tag,
    // PaginationCom,
    "van-icon": Icon,
    "van-swipe-cell": SwipeCell,
    "van-empty": Empty,
    "van-pagination": Pagination,
    "van-nav-bar": NavBar,
    "van-card": Card,
    "van-search": Search,
    "van-sticky": Sticky,
    // Edit,
    feedback,
    // 样品反馈详情
    // feedbackDetail,
    HeaderMenu
    // work
  },

  data() {
    return {
      // 标签栏点击的是我的样品还是反馈
      tabTile: "我的样品",
      active: 0,
      readonly: false,
      loading: false,
      finished: false,
      PageRows: 10,
      pagination: {
        current: 1,
        pageSize: 15,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ["15", "30", "60"], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      cardData: [],
      SWOloading: false,
      SWOfinished: false,
      SWOPageRows: 10,
      SWOTitle: "",
      Total: 0,
      Keyword: "",
      data: [],
      MycardData: [],
      Myloading: false,
      Myfinished: false,
      MyPageRows: 10,
      userId: "",
      GLtitle: "",
      GLloading: false,
      GLfinished: false,
      GLPageRows: 10,
      GLcardData: [],
      active2: 0,

      queryParamfeed: [
        {
          condition: "CustomerName"
        }
      ],
      queryParam: [
        {
          condition: "CustomerName",
          Keyword: ""
        }
      ]
    };
  },
  created() {
    this.data = [];
    this.getDataList();
    // this.getMyWorkorderList();
    this.op();
  },

  methods: {
    // 反馈按钮点击事件
    feedBackChange(item) {
      this.$refs.feedback.openForm(item.Id);
    },
    // 我的样品列表点击事件
    sampleChange(item) {
      if (item.ApprovalStatus == 1 || item.ApprovalStatus == 2) {
        // 只有审批通过 或者驳回的条件下可以查看详情
        this.$router.push({
          path: "/service/Edit",
          query: { Id: item.Id, readonly: 2 } //编辑
        });
      }
    },
    statype(str) {
      if (str == 0) {
        return "primary";
      }
      if (str == 1) {
        return "success";
      }
      if (str == 2) {
        return "danger";
      }
    },
    status(str) {
      if (str == 0) {
        return "申请中";
      }
      if (str == 1) {
        return "审批通过";
      }
      if (str == 2) {
        return "驳回";
      }
    },
    GLonLoad() {
      this.GLPageRows += 20;
      this.getGLcardData();
    },
    MyonLoad() {
      console.log("object");
      this.MyPageRows += 20;
      this.getMyWorkorderList();
    },
    SWOonLoad() {
      console.log("object");
      this.SWOPageRows += 20;
      this.getWorkorderList();
    },
    onLoad() {
      this.PageRows += 20;
      this.getDataList();
      console.log("object");
    },
    GLtitlesearch() {},
    mywork(item) {
      this.$router.push({
        path: "/service/myWork",
        query: { Id: item.Id }
      });
      // this.$refs.myWork.openForm(item);
    },
    getGLcardData() {
      this.http
        .post(
          "/SWOManagement/ServiceWorkOrderMain/GetDataListByMySelfCustomer",
          {
            PageIndex: 1,
            PageRows: this.GLPageRows,
            SortField: "CreateTime",
            SortType: "desc",
            Search: [
              {
                Condition: "SWOTitle",
                Keyword: this.GLtitle
              }
            ]
          }
        )
        .then(resJson => {
          if (resJson.Success) {
            this.GLcardData = resJson.Data;
            this.GLloading = false;
            if (this.GLcardData.length >= resJson.Total) {
              this.GLfinished = true;
            } else {
              this.GLfinished = false;
            }
          }
        });
    },
    //待办
    getMyWorkorderList() {
      this.http
        .post("/SWOManagement/ServiceWorkOrderMain/GetDataListByMyToDo", {
          PageIndex: 1,
          PageRows: this.MyPageRows,
          SortField: "CreateTime",
          SortType: "desc",
          Search: [
            {
              Condition: "CreatorId",
              Keyword: ""
            }
          ]
        })
        .then(resJson => {
          if (resJson.Success) {
            if (!resJson.Data) {
              resJson.Data = [];
            }
            this.MycardData = resJson.Data;
            this.Myloading = false;
            if (this.MycardData.length >= resJson.Total) {
              this.Myfinished = true;
            } else {
              this.MyOfinished = false;
            }
          }
        });
    },
    onRightWork() {
      this.readonly = false;
      this.$router.push({
        path: "/service/work",
        query: { readonly: this.readonly ? 1 : 0 }
      });
      // this.$refs.work.openForm();
    },
    sapleEdit(item) {
      this.readonly = true;
      // this.$refs.work.openForm(item);
      this.$router.push({
        path: "/service/work",
        query: { Id: item.Id, readonly: this.readonly ? 1 : 0 }
      });
    },
    op() {
      this.http.post("/Base_Manage/Home/GetOperatorInfo").then(resJson => {
        if (resJson.Success) {
          this.userId = resJson.Data.UserInfo.Id;
        }
      });
    },

    getWorkorderList() {
      this.http
        .post(
          "/SWOManagement/ServiceWorkOrderMain/GetDataListByMoreCondition",
          {
            PageIndex: 1,
            PageRows: this.SWOPageRows,
            SortField: "CreateTime",
            SortType: "desc",
            Search: [
              {
                Condition: "CreatorId",
                Keyword: this.userId
              },
              {
                Condition: "SWOTitle",
                Keyword: this.SWOTitle
              }
            ]
          }
        )
        .then(resJson => {
          if (resJson.Success) {
            this.cardData = resJson.Data;

            this.SWOloading = false;
            if (this.cardData.length >= resJson.Total) {
              this.SWOfinished = true;
            } else {
              this.SWOfinished = false;
            }
          }
        });
    },

    //  我的反馈列表点击
    feed(item) {
      this.$router.push({
        path: "/service/Edit",
        query: { Id: item.Id, readonly: 2 } //查看
      });
    },
    call2(key) {
      console.log(key);
      if (key == 0) {
        this.getWorkorderList();
      } else if (key == 1) {
        this.getMyWorkorderList();
      }
    },
    // 标签栏切换事件
    call(name, title) {
      this.tabTile = title;
      this.data = [];
      this.loading = true;
      this.finished = false;
      if (name == 0) {
        // 点击的是我的样品
        this.queryParam = [
          {
            condition: "CustomerName"
          }
        ];
        this.getDataList();
      } else if (name == 1) {
        // 点击的是我的反馈
        this.queryParam = [
          {
            condition: "CustomerName"
          },
          { condition: "DeliverStatus", Keyword: 2 }
        ];
        this.getDataList();
      } else if (name == 2) {
        this.getGLcardData();
      } else if (name == 3) {
        this.getWorkorderList();
        // this.getMyWorkorderList();
      }

      // console.log(name);
      // if (name == 1) {
      //   this.queryParam = [
      //     {
      //       Condition: "CustomerName"
      //     },
      //     {
      //       condition: "DeliverStatus",
      //       Keyword: 2
      //     }
      //   ];
      // } else {
      //   this.queryParam = [
      //     {
      //       Condition: "CustomerName"
      //     }
      //   ];
      // }
      // this.getDataList();
    },
    paginationchange(a) {
      // a:当前选中页码
      this.pagination.current = a;
      this.getDataList();
    },
    btn(id) {
      Dialog.confirm({
        message: "确定要删除吗",
        confirmButtonColor: "#1989fa"
      })
        .then(() => {
          this.http
            .post("/SampleManagement/SPL_SampleApplyMain/DeleteDataOfAll", id)
            .then(resJson => {
              if (resJson.Success) {
                this.$toast("删除成功");
                this.getDataList();
              } else {
                this.$toast("删除失败");
              }
            });
        })
        .catch(() => {
          console.log(123);
        });
    },
    clear() {
      console.log(123);
      if (this.tabTile === "我的样品") {
        this.queryParam = [
          {
            condition: "CustomerName"
          }
        ];
      } else {
        this.queryParam = [
          {
            condition: "CustomerName"
          },
          {
            condition: "DeliverStatus",
            Keyword: 2
          }
        ];
      }

      this.data = [];
      this.loading = true;
      this.finished = false;
      this.getDataList();
    },
    // 返回上一页
    onClickLeft() {
      this.$router.go(-1);
    },
    // 新建样品
    onClickRight() {
      this.$router.push({ path: "/service/Edit", query: { readonly: 0 } });
      // this.$refs.edit.openForm();
      // this.readonly = false;
    },
    //弹出页面
    Edit(item) {
      // this.$refs.edit.openForm(item.Id);

      // console.log(this.$router);
      if (item.ApprovalStatus == 1) {
        this.readonly = true;
      } else {
        this.readonly = false;
      }
      this.$router.push({
        path: "/service/Edit",
        query: { Id: item.Id, readonly: 1 } //编辑
      });
    },
    // 搜索按钮
    onSearch() {
      // 清空
      this.search();
    },
    //我的样品搜索
    search(value) {
      this.queryParam[0].Keyword = ""
      this.data = [];
      this.loading = true;
      this.finished = false;
      console.log(value);
      if (this.tabTile === "我的样品") {
        this.queryParam[0].Condition = "CustomerName";
        if (value) {
          this.queryParam[0].Keyword = value;
        }
      } else {
        if (value) {
          this.queryParam[0].Keyword = value;
        }
      }
      this.getDataList();
    },
    //我的反馈搜索
    // searchfeed(value) {
    //   this.data = [];
    //   this.loading = true;
    //   this.finished = false;
    //   // this.queryParam[0].Condition = "CustomerName";
    //   this.queryParam[0].Keyword = value;
    //   this.getDataList();
    // },
    SWOTitlesearch(value) {
      this.SWOTitl = value;
      this.getWorkorderList();
    },
    SWOTitleclear() {
      this.SWOTitle = "";
      this.getWorkorderList();
    },
    clearfeed() {
      this.queryParam = [
        {
          condition: "CustomerName"
        }
      ];
      this.getDataList();
    },
    // 获取样品反馈列表
    getDataList() {
      this.selectedRowKeys = [];
      this.data =[]
      this.loading = true;
      this.http
        .post(
          "SampleManagement/SPL_SampleApplyMain/GetDataListByMySelfAndMoreCondition",
          {
            PageIndex: 1,
            PageRows: this.PageRows,
            SortField: "CreateTime",
            SortType: "desc",
            Search: this.queryParam
          }
        )
        .then(resJson => {
          this.data = resJson.Data;
          this.Total = resJson.Total;
          this.loading = false;
          if (this.data.length >= resJson.Total) {
            this.finished = true;
          } else {
            this.finished = false;
          }
          // console.log(this.data);
        });
    }
  },
  watch: {
    $route(a, b) {
      // 默认样品反馈
      this.active=0
      this.loading = true;
      this.finished = false;
      this.queryParam = [
        {
          condition: "CustomerName"
        }
      ];
      this.getMyWorkorderList();
      this.getWorkorderList();
      this.getDataList(0);
      this.getGLcardData();
      console.log(a, b);
    }
  }
};
</script>

<style scoped>
/* 覆盖van-button的默认样式 */
.van-button {
  padding: 0 10px 0 10px !important;
}
.DeliverAddress {
  margin-left: 10px;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* 超出几行显示 */
  -webkit-line-clamp: 1;
}
.state {
  display: flex;
  justify-content: space-between;
}
.pagination {
  position: absolute;
  bottom: 5px;
  right: 20%;
}
.delete {
  padding-top: 10px;
  background-color: #fff;
  padding-right: 20px;
  height: 60px;
  font-size: 60px;
  color: red;
}
.outerBox {
  height: calc(100vh - 140px);
  padding-bottom: 60px;
  box-sizing: border-box;
  overflow: auto;
}
.btn {
  position: absolute;
  bottom: 0;
  right: 0;
}
.sampleName {
  font-weight: 600;
  line-height: 1.8;
  width: 240px;
  color: #000;
  font-size: 14px;
  margin-left: 10px;
  margin-top: 5px;
}
.MySamplebox {
  box-shadow: 2px 2px 5px #ccc;
  border-radius: 5px;
  position: relative;
  width: 95%;
  margin: 3px auto;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
img {
  width: 100px;
  height: 100px;
}

.fixedbox {
  position: fixed;
  bottom: 0;
  right: 0;
  /* height: 50px; */
  background: #fff;
  width: 100vw;
}
.pagination {
  position: absolute;
  bottom: 5px;
  right: 20%;
}
.code {
  display: flex;
  justify-content: start;
  margin-left: 10px;
  color: #777;
}
.Foricon {
  color: blue;
  position: absolute;
  right: 8px;
}
.btn {
  position: absolute;
  bottom: 0;
  right: 0;
}

.formalBox {
  height: calc(100vh - 150px);
  padding-bottom: 50px;
  box-sizing: border-box;
  overflow: auto;
}

.cardName {
  padding-top: 10px;
  /* margin-left: 10px; */
  margin-bottom: 5px;
  color: #000000;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.8;
}
.companyAddress {
  padding-top: 10px;
  margin-left: 10px;

  color: #777;
  /* font-weight: 600;
  font-size: 18px; */
  line-height: 1.3;
}
.boxFormal {
  box-shadow: 2px 2px 5px #ccc;
  border-radius: 5px;
  position: relative;

  width: 95%;
  /* height: 80px; */
  padding-bottom: 10px;
  margin: 3px auto;
  margin-bottom: 10px;
}
/* .Father {
  display: flex;
} */
</style>
